import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Tabbar } from 'react-vant'
import '../css/footer.css'
import '../css/iconfont.css'
import 'animate.css'
import { setActive } from '../store/active'
import { useDispatch, useSelector } from 'react-redux'
export default function Footer() {
    let val = useSelector(state => state.active.value)
    let navigate = useNavigate()
    let [value, setValue] = useState(val)
    let dispath = useDispatch()
    let setVal = (active) => {
        dispath(setActive(active))
    }
    return (
        <div>
            <Tabbar fixed className='footer animate__animated animate__slideInUp' activeColor='#fff' value={value} onChange={(active) => { setVal(active) }}>
                <Tabbar.Item onClick={() => { navigate('/home/playCar') }} stlye={{ width: '58px', marginRight: '12px' }} >
                    <div className='box'>
                        <span className="iconfont icon-chepai"></span>
                        <span className='text'>玩车</span>
                    </div>
                </Tabbar.Item>
                <Tabbar.Item onClick={() => { navigate('/home/community/jing') }} stlye={{ width: '58px', marginRight: '12px' }} >
                    <div className='box'>
                        <span className="iconfont icon-fangxiangpan"></span>
                        <span className='text'>社区</span>
                    </div>
                </Tabbar.Item>
                <Tabbar.Item onClick={() => { navigate('/home/douyin') }} stlye={{ width: '58px', margin: '0px,21px' }} >
                    <div className='dy'>
                        <img src='../1x.png' alt='' style={{ zIndex: '5', margin: '9px' }} />
                        <img src='../1x.png' alt='' style={{ zIndex: '5', margin: '9px' }} className='animate__animated animate__rotateIn' />
                    </div>
                </Tabbar.Item>
                <Tabbar.Item onClick={() => { navigate('/home/parts') }} stlye={{ width: '58px', marginLeft: '12px' }} >
                    <div className='box'>
                        <span className="iconfont icon-chelun"></span>
                        <span className='text'>配件</span>
                    </div>
                </Tabbar.Item>
                <Tabbar.Item onClick={() => { navigate('/home/my/page') }} stlye={{ width: '58px', marginLeft: '12px' }}>
                    <div className='box'>
                        <span className="iconfont icon-a-toukuianquanmao"></span>
                        <span className='text'>我的</span>
                    </div>

                </Tabbar.Item>
            </Tabbar>
        </div>
    )
}
